<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>注册页面</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        var regAccount = new RegExp("^[a-z][a-z\\d_]{5,11}$", "i"),
            regCode = new RegExp("^[a-z\\d]{5}$", "i"),
            regMail = new RegExp("^[a-zA-Z0-9_.-]+@[a-z0-9-]+(\\.[a-zA-Z0-9-]+)*\\.[a-zA-Z0-9]{2,6}$");

        function msgAlert(msg) {
            alert(msg);
        }

        function createAccount() {
            var form = document.getElementById("createAccountForm");
            var mail = form["Mail"].value, un = form["Username"].value, pwd = form["Password"].value,
                pwd1 = form["Password1"].value,
                code = form["Code"].value;
            if (!regMail.test(mail)) {
                msgAlert("邮箱格式错误")
                return false;
            }
            if (!regAccount.test(un)) {
                msgAlert("用户名格式错误")
                return false;
            }
            if (!regCode.test(code)) {
                msgAlert("验证码格式错误")
                return false;
            }
            if (!(pwd && pwd1 && pwd === pwd1)) {
                msgAlert("密码错误")
                return false;
            }
            $.ajax({
                type: "POST",
                url: "/api/account/create",
                data: $(form).serialize(),
                success: function (result) {
                    if (result.code == 0) {
                        // msgAlert("账号 " + un + " 注册邮件已发送至邮箱: " + mail + ", 请前往邮箱完成账号注册");
                        // form.reset();
                        location.href = "/wow/email?mail=" + encodeURIComponent(mail)
                    } else {
                        msgAlert("创建失败：" + result.message);
                    }
                },
                error: function () {
                    msgAlert("创建账号异常！");
                }
            });
            return true;
        }

        function loadCode() {
            var img = $("#imgCode");
            img.css("visibility", "hidden");
            $.ajax({
                type: "GET",
                url: "/api/captcha",
                success: function (result) {
                    if (result.code == 0) {
                        img[0].src = result.data;
                        img.css("visibility", "visible");
                    } else {
                        msgAlert("请刷新页面重新获取验证码：" + result.message);
                    }
                },
                error: function () {
                    msgAlert("请刷新页面重新获取验证码");
                }
            });
        }

        $(function () {
            loadCode();
            $("#imgCode").click(loadCode)
        });
    </script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">&nbsp;</div>
    </div>
    <div class="row">
        <div class="col-xs-offset-2 col-xs-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">账号注册</h3>
                </div>
                <div class="panel-body">
                    <form class="form-horizontal" id="createAccountForm">
                        <div class="form-group">
                            <label for="Mail" class="col-sm-2 control-label">邮箱</label>
                            <div class="col-sm-10">
                                <input type="email" class="form-control" id="Mail" name="Mail" placeholder="电子邮箱">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="Username" class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="Username" name="Username"
                                       placeholder="字母开头,仅包含字母数字,长度6-12">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="Password" class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="Password" name="Password"
                                       placeholder="密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="Password1" class="col-sm-2 control-label">确认密码</label>
                            <div class="col-sm-10">
                                <input type="password" class="form-control" id="Password1" name="Password1"
                                       placeholder="确认密码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="Code" class="col-sm-2 control-label">验证码</label>
                            <div class="col-sm-7">
                                <input type="email" class="form-control" id="Code" name="Code" placeholder="验证码">
                            </div>
                            <div class="col-sm-3">
                                <img id="imgCode" width="100%" height="34px" alt="" class="img-rounded"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="button" class="btn btn-default" onclick="createAccount()">创建账号</button>
                                {{/*<a href="/wow/reset" style="margin-left: 30px;">重置密码</a>*/}}
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-offset-2 col-xs-8">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">进入游戏说明</h3>
                </div>
                <div class="panel-body">
                    <dl>
                        <dd>下载游戏: <a href="https://pan.baidu.com/s/1jIqWmxC">https://pan.baidu.com/s/1jIqWmxC</a>
                            <kbd>nv2f</kbd></dd>
                        <dd>解压游戏后, 在游戏目录下新建批处理文件<code>wow.bat</code></dd>
                        <dd>复制以下代码至<code>wow.bat</code>并保存后运行</dd>
                        <dd><pre>@echo off
set server="{{.Realm}}"
rd /s /q "Cache"
echo SET realmlist %server% > Data\zhTW\realmlist.wtf
echo SET realmlist %server% > Data\enTW\realmlist.wtf
echo SET realmlist %server% > Data\zhCN\realmlist.wtf
echo SET realmlist %server% > Data\enCN\realmlist.wtf
echo SET realmlist %server% > Data\enUS\realmlist.wtf
echo SET realmlist %server% > realmlist.wtf
start Wow.exe</pre>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>